<template>
  <!-- 搜索 -->
  <view class="cu-bar search bg-white">
    <view class="search-form round">
      <text class="cuIcon-search"></text>
      <input
        v-model="keyword"
        :adjust-position="false"
        type="text"
        placeholder="好友查询"
        class="search-input"
        @input="onInput"
        @confirm="onConfirm"
        confirm-type="search"
      />
    </view>
    <view class="action" id="item2">
      <button class="cu-btn bg-green shadow-blur round" @tap="searcBlog1">搜索</button>
    </view>
  </view>
  <!-- 好友列表 -->
  <view>
    <!-- 默认最新选项卡 -->
    <view class="haoyoulie">
      <view
        class="hangzhen"
        v-for="(item, index) in tabBars"
        :key="index"
        :class="index === tabIndex ? ' gaoguan' : ''"
        @click="changeTab(index)"
        >{{ item.name }}</view
      >
    </view>

    <swiper
      :duration="150"
      :current="tabIndex"
      @change="onChangeTab"
      :style="'height:' + scrollH + 'px'"
    >
      <!-- 会默认分配索引 0 1 2 3 4 5  -->
      <swiper-item v-for="(item, index) in newsList" :key="index">
        <scroll-view
          scroll-y="true"
          :style="'height:' + scrollH + 'px;'"
          @scrolltolower="loadmore(index)"
        >
          <template v-if="item.list.length > 0">
            <!-- 列表 -->
            <block v-for="(item2, index2) in item.list" :key="index2">
              <!-- 列表样式 -->
              <view class="liebiao" hover-class="bg-light">
                <image :src="item2.image" mode="scaleToFill"></image>
                <view class="nichen">
                  <text class="font-md text-dark">{{ item2.username }}</text>
                  <unibadge
                    :text="item2.age"
                    :type="item2.sex === 1 ? 'primary' : 'error'"
                    size="normal"
                  >
                    <text
                      v-if="item2.sex > 0"
                      class="iconfont"
                      :class="item2.sex === 1 ? 'icon-nansheng' : 'icon-nvsheng'"
                      style="font-size: small; margin-right: 10rpx"
                    ></text>
                  </unibadge>
                </view>

                <uni-icons
                  :type="item2.isFollow ? 'checkbox-filled' : 'checkbox'"
                  size="30"
                ></uni-icons>
              </view>
            </block>
            <!-- 上拉加载 -->
            <loadMore :loadmore="item.loadmore" v-if="item.list.length > 10"></loadMore>
          </template>
          <template v-else>
            <!-- 无数据渲染页面 -->
            <no-thing>来了啊老弟</no-thing>
          </template>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
const demo = [
  {
    image: '../../../../static/images/loading 加载中_爱给网_aigei_com.gif',
    username: '小林',
    sex: 1,
    age: 24,
    isFollow: true,
  },
  {
    image: '../../../../static/images/loading 加载中_爱给网_aigei_com.gif',
    username: '小林',
    sex: 2,
    age: 24,
    isFollow: false,
  },
]
import loadMore from './loadmore/index'
import { UniIcons } from '@/components/uni-icons/uni-icons'
import { unibadge } from '@/components/uni-badge/uni-badge'
export default {
  components: {
    loadMore,
    unibadge,
    UniIcons,
  },
  data() {
    return {
      tabIndex: 0,
      tabBars: [
        {
          name: '互关',
        },
        {
          name: '关注',
        },
        {
          name: '粉丝',
        },
      ],
      newsList: [],
    }
  },

  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        // 可用窗口高度（屏幕高度-导航栏高度-底部栏高度。） -  选项卡高度
        this.scrollH = res.windowHeight - uni.upx2px(100)
        // console.log(this.scrollH)
      },
    })
    // 根据选项生成列表
    this.getData()
    this.changeTab(1)
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index
    },
    // 监听选项内容滑动
    onChangeTab(e) {
      this.changeTab(e.detail.current)
    },
    // 上拉加载更多
    loadmore(index) {
      // 拿到当前列表
      let item = this.newsList[index]
      if (item.loadmore !== '上拉加载更多') return
      console.log('loadmore')
      console.log(item)
      // 修改当前加载状态
      item.loadmore = '加载中。。。'
      // 模拟数据请求
      setTimeout(() => {
        // 加载数据
        // ... 相当于取出来当前对象可以遍历出来的内容放到了当前对象里面。
        // 这个可以粗糙的理解为把合并了两个一摸一样的列表，列表里面原来的内容*2了
        item.list = [...item.list, ...item.list]
        item.loadmore = '上拉加载更多'
      }, 5000)
    },
    // 制作列表+上拉加载数据初始值
    getData() {
      var arr = []
      for (let i = 0; i < this.tabBars.length; i++) {
        let obj = {
          loadmore: '上拉加载更多',
          list: [],
        }
        if (i < 2) {
          obj.list = demo
        }
        arr.push(obj)
      }
      this.newsList = arr
    },
    onPullDownRefresh1() {
      console.log('refresh')
      setTimeout(function () {
        uni.stopPullDownRefresh()
      }, 1000)
    },
  },
  onPullDownRefresh() {
    // 触发下拉刷新的事件
    console.log('下拉刷新')
    this.onPullDownRefresh1()
  },
}
</script>

<style scoped lang="scss">
@import url('../../../../static/assets/wxss/iconfont.css');
.haoyoulie {
  display: flex;
  padding: 2px;
  height: 100rpx;
}
.hangzhen {
  display: flex;
  align-content: center;
  justify-content: center;
  font-weight: bold;
  flex: 1;
  font-size: 30rpx;
}
.gaoguan {
  font-size: larger;
  color: #c50e0e;
}
// 列表
.liebiao {
  // 写一个好看的边框
  display: flex;
  align-content: center;

  padding: 2px;
  border-bottom: #c50e0e;
  width: 100%;
  margin-bottom: 1rpx;
  display: flex;
  align-items: center;
  height: 120rpx;
  // 写个圆角
  border-radius: 10rpx;
  // 背景色
  background-color: #fff;
  // 边框
  border: 1rpx solid #ccc;
  // 阴影
  box-shadow: 0 0 10rpx #ccc;
  // 圆角
  border-radius: 10rpx;
}
.liebiao image {
  // 写个圆角
  border-radius: 50rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  // 背景色
  background-color: #ccc;
  // 边框
  border: 1rpx solid #ccc;
  // 阴影
  box-shadow: 0 0 10rpx #ccc;
}
.nichen {
  display: flex;
  flex: 1;
  align-content: center;
  flex-direction: column;
}
// 改变样式
.bg-light{
  background-color: #969191;

}
</style>
